<template>
  <div>
    <!--条件筛选-->
    <TopFilter :list="topFilterList" :cols="3" :labelWidth="110" :collapse="boolean" @filterChange="changeHandle" @onCollapse="collapseHandle"></TopFilter>
    <!--操作 -->
    <button-area :style="{ paddingLeft: '80px' }"></button-area>
    <!-- 列筛选-->
    <FilterTable
      ref="table"
      columnsRef="lhmServiceRangeSummary"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'rows'"
      :isExportExcel="true"
      exportFileName="服务范围汇总.xlsx"
      :isSelectColumn="isSelectColumn"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="selectChangeHandle"
      :onSyncTableData="tableAllData"
    >
      <template slot="controls">
        <!-- <el-button size="small" type="primary" @click="saveHandle">打印</el-button> -->
      </template>
    </FilterTable>
    <BasePrint ref="print" :data="printList" template="serviceRangeSummary" />
    <BaseDialog
      :visible.sync="visible6"
      title="维修类别"
      :closable="true"
      :destroyOnCloseSaleSingle="true"
      :maskClosable="true"
      :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }"
    >
      <SelectWXLB @cancelManager6="cancelDialogManager6" @confirmManager="confirmDialogManager6" />
    </BaseDialog>
    <BaseDialog
      :visible.sync="visible7"
      title="车型"
      :closable="true"
      :destroyOnCloseSaleSingle="true"
      :maskClosable="true"
      :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }"
    >
      <SelectCX @cancelManager7="cancelDialogManager7" @confirmManager="confirmDialogManager7" />
    </BaseDialog>

    <!-- printCMZ() {
      this.$refs.print.EXCUTE_PRINT();
    }, -->
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import moment from 'moment';
import { getServiceRangeSummary } from '@/api/repair/queryStatistics/queryAccounts';
// 维修类别
import { getfindAllRepairType } from '@/api/repair/business/customer/history';
// 车型 车系
import { getModel, getSeries } from '@/api/customerRepair/customerCare/insuranceDueRemind/index';
import SelectCX from './selectCX';
import SelectWXLB from './selectWXLB';
// 二手车置换
export default {
  name: 'LHMServiceRangeSummary',
  components: {},
  components: {
    SelectCX,
    SelectWXLB
  },
  mixins: [dictionary],
  data() {
    this.conf = { add: '新增', delete: '删除', edit: '编辑', show: '显示' };
    this.formData = null;
    return {
      topFilterList: this.createTopFilterList(),
      fetchParams: { xhrAbort: true },
      visible: false,
      visible1: false,
      visible6: false,
      visible7: false,
      dialogTitle: '',
      boolean: false,
      printList: [],
      isSelectColumn: false,
      fetchApi: getServiceRangeSummary,
      columns: this.createTableCheckColumns(),
      handleType: '',
      formData: {},
      tableData: [],
      ids: [],
      Wcode: '', // 类型code
      modelCode: '' // 车型code
    };
  },
  mounted() {
    // 分页
    this.FilterTable = this.$refs.table.$refs.pageTable;
    this.init();
    this.querySeries();
    this.queryModel();
  },
  methods: {
    async queryModel() {
      const res = await getModel();
      let list = res.data.map(x => ({ text: x.MODEL_NAME, value: x.MODEL_ID + '' }));
      this.columns.find(item => item.dataIndex === 'MODEL').editItems = list;
    },
    async querySeries() {
      const res = await getSeries();
      let list = res.data.map(x => ({ text: x.SERIES_NAME, value: x.SERIES_ID + '' }));
      this.columns.find(item => item.dataIndex === 'SERIES').editItems = list;
    },
    async init() {
      const res = await getfindAllRepairType();
      let list = res.data.map(x => ({ text: x.REPAIR_TYPE_NAME, value: x.REPAIR_TYPE_CODE + '' }));
      this.columns.find(item => item.dataIndex === 'REPAIR_TYPE_CODE').editItems = list; // 维修类型
    },
    createTopFilterList() {
      return [
        {
          type: 'RANGE_DATE',
          label: '送修日期范围',
          fieldName: 'beginDate|endDate',
          placeholder: '选择日期',
          initialValue: [
            moment(new Date())
              .subtract(1, 'month')
              .format('YYYY-MM-DD'),
            moment(new Date()).format('YYYY-MM-DD')
          ],
          rules: [{ required: true, message: '请选日期范围', trigger: 'change' }]
        },
        {
          type: 'INPUT',
          label: '类别',
          fieldName: 'REPAIR_TYPE_CODE',
          placeholder: '请选择...',
          unitRender: () => {
            return <el-button slot="append" icon="el-icon-search" onClick={this.openManager6} />;
          }
        },
        {
          type: 'INPUT',
          label: '车型',
          fieldName: 'MODEL_CODE',
          placeholder: '请选择...',
          unitRender: () => {
            return <el-button slot="append" icon="el-icon-search" onClick={this.openManager7} />;
          }
        }
      ];
    },
    createTableCheckColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '维修类别',
          dataIndex: 'REPAIR_TYPE_NAME',
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'input'
        },
        {
          title: '车型',
          dataIndex: 'MODEL_NAME',
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'input'
        },
        {
          title: '厂牌',
          dataIndex: 'SERIES_NAME',
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'input'
        },
        {
          title: '本地车',
          dataIndex: 'BD_CAR',
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'input'
        },
        {
          title: '外地车',
          dataIndex: 'WD_CAR',
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'input'
        },
        {
          title: '合计车次',
          dataIndex: 'HJ_CAR',
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'input'
        },
        {
          title: '其中私车',
          dataIndex: 'PRICATE_CAR',
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'input'
        },
        {
          title: '军车',
          dataIndex: 'ARMY_CAR',
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'input'
        }
      ];
    },
    selectData(val) {
      this.tableData = val;
    },
    tableAllData(val) {
      this.printList = val;
    },
    selectChangeHandle(val) {
      this.selectedRow = val;
    },
    changeHandle(val) {
      let obj = {
        REPAIR_TYPE_CODE: this.Wcode,
        MODEL_CODE: this.modelCode
      };
      this.fetchParams = Object.assign({}, val, obj);
    },
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },
    openManager6() {
      this.visible6 = true;
    },
    openManager7() {
      this.visible7 = true;
    },
    confirmDialogManager6(val) {
      this.topFilterList.forEach(x => {
        if (x.fieldName === 'REPAIR_TYPE_CODE') {
          x.initialValue = val[0].REPAIR_TYPE_NAME;
        }
        this.Wcode = val[0].REPAIR_TYPE_CODE;
      });
      this.cancelDialogManager6();
      this.topFilterList = [...this.topFilterList];
    },

    confirmDialogManager7(val) {
      this.topFilterList.forEach(x => {
        if (x.fieldName === 'MODEL_CODE') {
          x.initialValue = val[0].MODEL_NAME;
        }
      });
      this.modelCode = val[0].MODEL_CODE;
      this.cancelDialogManager7();
      this.topFilterList = [...this.topFilterList];
    },
    cancelDialogManager6() {
      this.visible6 = false;
    },
    cancelDialogManager7() {
      this.visible7 = false;
    },
    showHandler() {
      // 显示
      this.dialogTitle = `其他费用`;
      this.visible = true;
    },
    saveHandle() {
      this.$refs.print.EXCUTE_PRINT();
    },
    closeHandler(val, type) {
      // 关闭
      this.visible = val;
      if (type === 'refresh') {
        // 重新加载
        this.fetchParams = { ...this.fetchParams };
      }
    }
  }
};
</script>
<style lang="less" scoped></style>
